<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin:0em;
            padding:0em;
        }

        body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            background: #403833;
            font-family: 'Open Sans';
            font-weight: 100;
            color:#f2f2f2;
            font-size:100%;
            margin:0em;
            padding:0em;
        }

        .loader {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -mos-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            text-align:center;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-shadow: inset 0px -5px 10px -7px rgba(0,0,0,0.5), inset 0px 5px 10px -7px rgba(0,0,0,0.5);
            padding: 5% 0%;
            overflow:hidden;
            cursor:default;
            min-width:33.25em;
        }

        .loader div{
            width:2.5em;
            height:2.5em;
            background:#fff;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            margin:0 5px;
            float:left;
            font-size:1.65em;
            line-height:2.5em;
            -webkit-animation: bounce 1.75s infinite ease-in-out;
            -moz-animation: bounce 1.75s infinite ease-in-out;
            -mos-animation: bounce 1.75s infinite ease-in-out;
            -o-animation: bounce 1.75s infinite ease-in-out;
            animation: bounce 1.75s infinite ease-in-out;
        }

        .loader div:nth-child(1){
            -webkit-animation-delay: 0ms;
            -moz-animation-delay: 0ms;
            -ms-animation-delay: 0ms;
            -o-animation-delay: 0ms;
            animation-delay: 0ms;
            background:#DB2F00;
            color:#fff;
        }

        .loader div:nth-child(2){
            -webkit-animation-delay: 50ms;
            -moz-animation-delay: 50ms;
            -ms-animation-delay: 50ms;
            -o-animation-delay: 50ms;
            animation-delay: 50ms;
            background:#ff6d37;
            color:#fff;
        }

        .loader div:nth-child(3){
            -webkit-animation-delay: 100ms;
            -moz-animation-delay: 100ms;
            -ms-animation-delay: 100ms;
            -o-animation-delay: 100ms;
            animation-delay: 100m;
            background:#ffa489;
            color:#fff;
        }

        .loader div:nth-child(4){
            -webkit-animation-delay: 150ms;
            -moz-animation-delay: 150ms;
            -ms-animation-delay: 150ms;
            -o-animation-delay: 150ms;
            animation-delay: 150ms;
            background:#f2f2f2;
            color:#555;
        }

        .loader div:nth-child(5){
            -webkit-animation-delay: 200ms;
            -moz-animation-delay: 200ms;
            -ms-animation-delay: 200ms;
            -o-animation-delay: 200ms;
            animation-delay: 200ms;
            background:#99d3d4;
            color:#fff;
        }

        .loader div:nth-child(6){
            -webkit-animation-delay: 250ms;
            -moz-animation-delay: 250ms;
            -ms-animation-delay: 250ms;
            -o-animation-delay: 250ms;
            animation-delay: 250ms;
            background:#56bebf;
            color:#fff;
        }

        .loader div:nth-child(7){
            -webkit-animation-delay: 300ms;
            -moz-animation-delay: 300ms;
            -ms-animation-delay: 300ms;
            -o-animation-delay: 300ms;
            animation-delay: 300ms;
            color:#fff;
            background:#13A3A5;
        }


        @-webkit-keyframes bounce {
            0% { -webkit-transform: translateY(-150px); }
            20% { -webkit-transform: translateY(30px); }
            30% { -webkit-transform: translateY(-10px); }
            40% { -webkit-transform: translateY(0); }
            60% { -webkit-transform: translateY(0); }
            80% { -webkit-transform: translateY(-20px); }
            100% { -webkit-transform: translateY(150px); }
        }


        @-moz-keyframes bounce {
            0% { -moz-transform: translateY(-150px); }
            20% { -moz-transform: translateY(30px); }
            30% { -moz-transform: translateY(-10px); }
            40% { -moz-transform: translateY(0); }
            60% { -moz-transform: translateY(0); }
            80% { -moz-transform: translateY(-20px); }
            100% { -moz-transform: translateY(150px); }
        }


        @-mos-keyframes bounce {
        0% { -mos-transform: translateY(-150px); }
        20% { -mos-transform: translateY(30px); }
        30% { -mos-transform: translateY(-10px); }
        40% { -mos-transform: translateY(0); }
        60% { -mos-transform: translateY(0); }
        80% { -mos-transform: translateY(-20px); }
        100% { -mos-transform: translateY(150px); }
        }


        @-o-keyframes bounce {
            0% { -o-transform: translateY(-150px); }
            20% { -o-transform: translateY(30px); }
            30% { -o-transform: translateY(-10px); }
            40% { -o-transform: translateY(0); }
            60% { -o-transform: translateY(0); }
            80% { -o-transform: translateY(-20px); }
            100% { -o-transform: translateY(150px); }
        }


        @keyframes bounce {
            0% { transform: translateY(-150px); }
            20% { transform: translateY(30px); }
            30% { transform: translateY(-10px); }
            40% { transform: translateY(0); }
            60% { transform: translateY(0); }
            80% { transform: translateY(-20px); }
            100% { transform: translateY(150px); }
        }


    </style>
</head>
<body>
<div class="loader">
    <div>l</div>
    <div>o</div>
    <div>a</div>
    <div>d</div>
    <div>i</div>
    <div>n</div>
    <div>g</div>
</div>
</body>
</html>